<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>9-封装_简易axios_获取城市列表</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /* 

     */
    //1.定义myAxios函数，接收配置对象，返回promise对象
    function myAxios(config){
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        //1. 判断有params选项，携带查询参数
        if(config.params){
          // 2. 使用 URLSeacherParams转换，并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          // 把查询参数字符串，拼接在 url？后面
          config.url += `?${queryString}`
        }

        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend',() => {
        // 3. 调用成功/ 失败的处理程序
         if(xhr.status >= 200 && xhr.status < 300){
          resolve(JSON.parse(xhr.response))
         }else{
          reject(new error(xhr.response))
        }
      })
         xhr.send()
      })
    }

    // 3.使用myAxios函数，获取地区列表
    myAxios({
      url:'http://hmajax.itheima.net/api/area',
      params:{
        pname:'辽宁省',
        cname:'大连市'
      }
    }).then(result =>{
      console.log(result);
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    }).catch(error =>{
      console.log(error.message);
    })

   
  </script>
</body>
</html>